import React, {Component} from 'react';
import {View, StyleSheet, ScrollView, ListView, Image, Text} from  'react-native';
import TopListView from './TopListView';
let dimension = require('Dimensions');
let {width, height} = dimension.get('window');

let aodingge = require('../../img/brand/aodingge.jpg');
let baiwei = require('../../img/brand/baiwei.jpg');
let baiyunbian = require('../../img/brand/baiyunbian.jpg');
let bositu = require('../../img/brand/bositu.jpg');
let changcheng = require('../../img/brand/changcheng.jpg');
let guizhou = require('../../img/brand/guizhou.jpg');
let gujing = require('../../img/brand/gujing.jpg');
let jiannanchun = require('../../img/brand/jiannanchun.jpg');
let keluona = require('../../img/brand/keluona.jpg');
let lafei = require('../../img/brand/lafei.jpg');
let landai = require('../../img/brand/landai.jpg');
let langjiu = require('../../img/brand/langjiu.jpg');
let luzhoulaojiao = require('../../img/brand/luzhoulaojiao.jpg');
let panjiu = require('../../img/brand/panjiu.jpg');
let qingdao = require('../../img/brand/qingdao.jpg');
let shuijingfang = require('../../img/brand/shuijingfang.jpg');
let wuliangye = require('../../img/brand/wuliangye.jpg');
let xifeng = require('../../img/brand/xifeng.jpg');
let yanghe = require('../../img/brand/yanghe.jpg');
let zhangyu = require('../../img/brand/zhangyu.jpg');

import BottomCommonCell from './BottomCommonCell';

export default class HomeTopView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activePage: 0
        };
        this.onScrollAnimationEnd = this.onScrollAnimationEnd.bind(this)
    }

    render() {
        return (
            <View style={styles.container}>
                <BottomCommonCell leftIcon="flag-checkered" leftTitle='品牌' rightTitle='更多品牌' fun={()=>{alert("查看更多品牌")}}/>
                <ScrollView horizontal={true}
                            pagingEnabled={true}
                            showsHorizontalScrollIndicator={false}
                            onMomentumScrollEnd={this.onScrollAnimationEnd}
                >
                    {HomeTopView.renderScrollItem()}
                </ScrollView>
                <View style={styles.IndicatorViewStyle}>
                    {this.renderIndicator()}
                </View>
            </View>
        )
    }

    static renderScrollItem() {
        let itemArr = [];
        let item = [[{title: "奥丁格", image: aodingge}, {title: "百威", image: baiwei},
            {title: "白云边", image: baiyunbian}, {title: "柏丝图", image: bositu
        }, {title: "长城", image: changcheng},
            {title: "贵州", image: guizhou}, {title: "古井", image: gujing},
            {title: "剑南春", image: jiannanchun}, {title: "科罗娜", image: keluona},
            {title: "拉菲", image: lafei}
        ],
            [{title: "蓝带", image: landai}, {title: "郎酒", image: langjiu}, {title: "泸州老窖", image: luzhoulaojiao}, {
                title: "汾酒",
                image: panjiu
            }, {title: "青岛", image: qingdao},
                {title: "水井坊", image: shuijingfang}, {title: "五粮液", image: wuliangye}, {title: "西凤", image: xifeng}, {
                title: "洋河",
                image: yanghe
            }, {title: "张裕", image: zhangyu}]];
        for (let i = 0; i < item.length; i++) {
            itemArr.push(
                <TopListView dataArr={item[i]} key={i}/>
            );
        }
        return itemArr;
    }

    renderIndicator() {
        let indicatorArr = [], style;
        for (let i = 0; i < 2; i++) {
            style = (i === this.state.activePage ? {color: 'orange'} : {color: 'gray'})
            indicatorArr.push(
                <Text key={i} style={[{fontSize:25},style]}>&bull;</Text>
            )
        }
        return indicatorArr;
    }

    ///当滚动结束后调用
    onScrollAnimationEnd(e) {
        let currentPage = Math.floor(e.nativeEvent.contentOffset.x / width);
        this.setState({
            activePage: currentPage
        });
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        marginTop: 15
    },
    textStyle: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    IndicatorViewStyle: {
        flexDirection: 'row',
        justifyContent: 'center'
    }
});
